<!DOCTYPE html>
<html lang="en">

<head>
	<title>three.js webgl - equirectangular panorama</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<style>
		body {
			background-color: #000000;
			margin: 0px;
			overflow: hidden;
		}

		#info {
			position: absolute;
			top: 0px;
			width: 100%;
			color: #ffffff;
			padding: 5px;
			font-family: Monospace;
			font-size: 13px;
			font-weight: bold;
			text-align: center;
		}

		a {
			color: #ffffff;
		}
	</style>
</head>

<body>

	<div id="container"></div>
	<div id="info">
	</div>

	<script src="build/three.min.js"></script>
	<script src="tweenjs.js"></script>
	<script src="build/TrackballControls.js"></script>

	<script>
	
		
  






		// 声明控制器
		var controls;
		// 声明摄像机、场景、渲染器
		var camera, scene, renderer;
		// Raycaster对象用于进行鼠标拾取。
		var raycaster = new THREE.Raycaster();
		var go_yangtai;
		var mouse = new THREE.Vector2();	//将鼠标位置
		var geometry;	//球体网格
		var sushe, sushe_low;		//宿舍全景图材质
		var yangtai, yangtai_low, yangtai_flag = false;	//阳台全景图材质、转到阳台
		var mesh;		//全景球体对象
		var time = 0;	//加载计数
		var camera_time = 0;	//摄像机移动参数
		init();
		animate();
		// update()
		function init() {
			// 容器
			var container;
			container = document.getElementById('container');
			// 透视投影照相机PerspectiveCamera
			camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1100);
			camera.position.set(20, 0, 0);
			// 创建场景
			scene = new THREE.Scene();
			// 红线是X轴，绿线是Y轴，蓝线是Z轴
			var axesHelper = new THREE.AxesHelper(1000);
			//axesHelper.position.set(0,100,0);
			scene.add(axesHelper);
			// 创建一个canvas绘制文字
			//绘制箭头
			makeArrow(function (aprite) {
				go_yangtai = aprite;
				// 设置箭头的位置
				go_yangtai.position.set(30, 0, -200);
				createjs.Ticker.framerate = 8;
				var flag=true;
				createjs.Ticker.addEventListener("tick", handleTick);
					function handleTick(event) {
						if(flag){
							flag=false
							createjs.Tween.get(go_yangtai.position).to({"y":40},1000,createjs.Ease.linear )
						}else{
							flag=true
							createjs.Tween.get(go_yangtai.position).to({"y":0},1000,createjs.Ease.linear)
						}
					}
				
				scene.add(go_yangtai);
			});
			//全景场景
			// 创建球几何体
			// Threejs构造函数SphereGeometry的参数1设置的是球体的半径值，参数2和参数3设置的球体经纬度两个方向的细分数，参数2默认值8，参数3默认值6，如果不设置这两参数直接执行
			var materials = createFace("img/0", "")
			mesh = new THREE.Mesh(new THREE.BoxGeometry(500, 500, 500), new THREE.MeshFaceMaterial(materials));
			scene.add(mesh);
			renderer = new THREE.WebGLRenderer({
				antialias: true
			});
			renderer.setPixelRatio(window.devicePixelRatio);
			renderer.setSize(window.innerWidth, window.innerHeight);
			document.body.appendChild(renderer.domElement);
			document.addEventListener('click', mouseClickEvent, false);
			document.addEventListener('mousemove', mouseMoveEvent, false);
			window.addEventListener( 'resize', onWindowResize, false );
			controls = new THREE.TrackballControls(camera, renderer.domElement);
			controls.rotateSpeed = 5;
			//变焦速度 
			controls.zoomSpeed = 3;
			//平移速度 
			controls.panSpeed = 0.8;
			//是否不变焦 
			controls.noZoom = false;
			//是否不平移 
			controls.noPan = false;
			//是否开启移动惯性 
			controls.staticMoving = true;
			//动态阻尼系数 就是灵敏度 
			controls.dynamicDampingFactor = 0.3;
			controls.minDistance = 0;
			controls.maxDistance = 250;
		}



		function onWindowResize() {
				// 摄像机视锥体的长宽比，通常是使用画布的宽/画布的高。默认值是1（正方形画布）。
				camera.aspect = window.innerWidth / window.innerHeight;
				//  更新相机投影矩阵，必须在参数发生变化后调用。
				camera.updateProjectionMatrix();

				renderer.setSize( window.innerWidth, window.innerHeight );

			}
		function animate() {
			requestAnimationFrame(animate);
			update();
		}
		function update() {
			controls.update();
			// go_yangtai.material.rotation = - controls.constraint.getAzimuthalAngle();
			renderer.render(scene, camera);
		}
		//切换场景动作
		function changeScene() {
			var material=createFace("img/15", "");
			var timer = setInterval(function () {
				camera.fov -= 1;
				camera.updateProjectionMatrix();
				if (camera.fov == 30) {
					clearInterval(timer);
					camera.fov = 50;
					camera.updateProjectionMatrix();
					mesh.material = material
					go_yangtai.visible = false;

				}
			}, 100)
		}



		function mouseClickEvent(event) {
			event.preventDefault();
			raycaster.setFromCamera(mouse, camera);   //射线捕捉
			var intersects = raycaster.intersectObjects([go_yangtai]);
			if (intersects.length > 0) {
				changeScene();
			}
		}

		function mouseMoveEvent(event) {
			// 屏幕坐标转世界坐标:
			mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
			mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
		}

		// 创建立方体的六个面
		function createFace(imgurl, endUrl) {
			var side=THREE.BackSide;
			var shadowSide=THREE.FrontSide;
			var materials = [
				// 右
				new THREE.MeshBasicMaterial({
					map: THREE.ImageUtils.loadTexture(imgurl + '_r.jpg' + endUrl, {},
						function () { renderer.render(scene, camera); }),
					side: side,
					shadowSide:shadowSide
				}),
				// 右
				new THREE.MeshBasicMaterial({
					map: THREE.ImageUtils.loadTexture(imgurl + '_l.jpg' + endUrl, {},
						function () { renderer.render(scene, camera); }),
					side: side,
					shadowSide:shadowSide
				}),
				// 上
				new THREE.MeshBasicMaterial({
					map: THREE.ImageUtils.loadTexture(imgurl + '_u.jpg' + endUrl, {},
						function () { renderer.render(scene, camera); }),
					side: side,
					shadowSide:shadowSide
				}),
				// 下
				new THREE.MeshBasicMaterial({
					map: THREE.ImageUtils.loadTexture(imgurl + '_d.jpg' + endUrl, {},
						function () { renderer.render(scene, camera); }),
					side:side,
					shadowSide:shadowSide
				}),
				// 前
				new THREE.MeshBasicMaterial({
					map: THREE.ImageUtils.loadTexture(imgurl + '_f.jpg' + endUrl, {},
						function () { renderer.render(scene, camera); }),
					side: side,
					shadowSide:shadowSide
				}),
				// 后
				new THREE.MeshBasicMaterial({
					map: THREE.ImageUtils.loadTexture(imgurl + '_b.jpg' + endUrl, {},
						function () { renderer.render(scene, camera); }),
					side: side,
					shadowSide:shadowSide
				})
			];
			return materials;
		}

		// 绘制箭头
		function makeArrow(fn) {
			var sprite;
			new THREE.TextureLoader().load('img/timg.png', function (texture) {
				var spriteMaterial = new THREE.SpriteMaterial(
					{ map: texture, useScreenCoordinates: false });
				sprite = new THREE.Sprite(spriteMaterial);
				sprite.scale.set(15, 30, 1);
				fn(sprite);
			});
		}
	</script>
</body>

</html>